<template>
    <div class="modify">
        <!-- <div class="title">修改密码</div>

        <div class="main">
            <p>原密码： <input type="password" name="first" id="" v-model="firstpass"></p> 
            <p>新密码： <input type="password" name="new" id="" v-model="newpass"></p>
            <p>新密码： <input type="password" name="newAgain" id="" v-model="newpassAga"></p>
            <button class="btn btn-outline-primary btn-sm" type="button">确认修改</button>
        </div> -->

        <form class="row g-3">
            <div class="col-md-8">
                <input type="text" class="form-control" id="validationServer01" required placeholder="名称" v-model="name" autofocus>
                <div id="nameHelp" class="form-text">请输入原名称</div>
            </div>

            <div class="col-md-8">
                <input type="email" class="form-control" id="validationServer02" required placeholder="邮箱" v-model="email">
                <div id="emailHelp" class="form-text">请输入邮箱号</div>
            </div>

            <div class="col-md-8">
                <input type="password" class="form-control" id="validationServer03" required placeholder="新密码" v-model="password">
                <div id="passwordHelp" class="form-text">请输入新密码</div>
            </div>

            <!-- <div class="col-md-8">
                <input type="password" class="form-control" :class="{'is-invalid': passwordRef.error}" id="validationServer02" required placeholder="新密码" v-model="passwordRef.val">
                <div id="passwordHelp" class="form-text" v-show="!passwordRef.error">重新输入新密码</div>
                <div class="invalid-feedback" v-show="passwordRef.error">
                {{passwordRef.message}}
                </div>
            </div> -->

            <div class="container">
                <div class="row">
                    <div class="col-sm">
                    <router-link to="/login"><a href="#">去登录</a></router-link>
                    </div>
                </div>
            </div>

            <button class="btn btn-primary" @click="sure" type="button">确认修改</button>
            
        </form>

    </div>
</template>

<script lang="ts">
import qs from 'qs'
import axios from 'axios'
import { useRouter } from "vue-router";
import { defineComponent, ref} from 'vue'


//邮箱验证正则表达式
// const emailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
// const passwordReg =  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/

export default defineComponent({
    name: 'modify',
    setup() {
        // const passwordRef = reactive({
        //     val: '',
        //     error: false,
        //     message: '',
        // })
        
        // const passwordValidate = () => {
        //     if(passwordRef.val === '') {
        //         passwordRef.error = true
        //         passwordRef.message = '内容不能为空！'
        //     } else if(!passwordReg.test(passwordRef.val) ) {
        //         passwordRef.error = true
        //         passwordRef.message = '密码错误！'
        //     } else {
        //         passwordRef.error = false
        //     }
        // }

        const name = ref()
        const email= ref()
        const password = ref()

        const router = useRouter()
        const sure = () => {
            // console.log("111")
            let postData = qs.stringify({
                old: name.value,
                new: email.value,
                centain: password.value,
            })
            axios.post(`/api/user/updatePassword`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

                if (res.status === 200) {
                    alert(res.data)
                    console.log(res)
                    console.log("222")
                    if(res.data === "修改成功") {
                        router.push("/login")
                    }
                    
                }
            })
        }

        return {
            // passwordRef,
            // passwordValidate,
            name,
            email,
            password,
            sure,
        }
    },
})
</script>

<style lang="stylus" scoped>
.modify
 form 
    width 60%
    margin-left 20%
    margin-top 1%
    height 30rem
    padding-top 80px
    border 1px #ccc solid 
    border-radius 20px
    box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
    background-color #fff
    .col-md-8
      .form-control
        margin-left 25%
      .form-text
        width 60%
        margin-left 25%
        text-align left
        font-size 16px
        color #ccc 
      .invalid-feedback
        margin-left 25%
        text-align left
    .container
      font-size 18px
      margin-top 0px
      //background-color red
      color #ccc 
      a 
        color #ccc
        margin-left 28%
        text-decoration none
      a:hover
        color #0d6efd
    .btn 
      width 30%
      height 50px
      margin-left 35%
</style>
